<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{ width:2000px;height: 2000px;}
    </style>
</head>
<body>
    <button>按钮</button>
    <script>
        // 1、关于页面上特殊元素
        // 获取html元素的dom对象 一般使用表示整个网页
        console.log(document.documentElement); 
        // 获取body标签的dom对象 
        console.log(document.body) 
        // 获取head标签的dom对象
        console.log(document.head)
        console.log(document.title)
        // 2、获取浏览器的尺寸
        console.log(window.innerWidth); //获取宽度 包含滚动条的17px
        console.log(window.innerHeight);//获取高度 包含滚动条的17px
        // 3、获取滚动的距离
        console.log('以html计算滚动距离',document.documentElement.scrollTop);
        console.log('以Body计算滚动距离',document.body.scrollTop);
        // 以documentElement或者以body都是可以取到滚动距离的 但是 到底用谁需要根据文档中是否存在DOCTYPE声明 如果存在需要使用documentElement取出的才是准确的 否则就以boby来获取
        // 考虑兼容性问题获取滚动距离
        // || 短路运算 如果前面的为真后面的不执行
        var scrollTop1 = document.documentElement.scrollTop || document.body.scrollTop;
        // 4、设置滚动距离
        document.querySelector('button').onclick = function(){
            document.documentElement.scrollTop = 200
        }
        // 5、滚动事件 不仅仅针对浏览器使用，对于普通的元素也可以使用
        window.onscroll = function(){
            console.log('滚起来')
        }

    </script>
</body>
</html>